<template>
  <div class="content" v-if="type == 0">
    <a-form ref="formRef" :model="formState" :rules="rules">
      <a-form-item ref="nickname" label="考生姓名" name="nickname">
        <a-input v-model:value="formState.nickname" placeholder="请输入姓名" />
      </a-form-item>

      <a-form-item label="性别" name="gender">
        <a-select v-model:value="formState.gender" placeholder="请选择性别">
          <a-select-option value="0">女</a-select-option>
          <a-select-option value="1">男</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item ref="username" label="身份证号" name="username">
        <a-input
          v-model:value="formState.username"
          placeholder="请输入身份证号"
        />
      </a-form-item>

      <a-form-item label="考试时间" name="kaoshi_id">
        <a-select
          v-model:value="formState.kaoshi_id"
          placeholder="请选择考试时间"
        >
          <a-select-option
            v-for="item in kaoshiList"
            :key="item.id"
            :value="String(item.id)"
            >{{ item.name }} --- {{ item.kaoshi_date }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="onSubmit" class="button"
          >查 询</a-button
        >
      </a-form-item>
    </a-form>
  </div>
  <div class="content" v-if="type == 1">
    <div>
      <iframe
        :src="`https://view.officeapps.live.com/op/view.aspx?src=${printingInfo}`"
        width="100%"
        height="1000"
        frameborder="1"
      ></iframe>
    </div>
    <div class="myButton" @click="Printing">准考证打印</div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
} from "vue";
import { message, notification } from "ant-design-vue";
import { getKaoshi, getSearchZkz, getSearchView, imgUrl } from "@/api/https.js";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const formRef = ref();
    const formState = reactive({
      user_id: JSON.parse(localStorage.getItem("info")).id, //用户id
      nickname: "", // 考生姓名
      gender: null, // 性别
      username: "", // 身份证号
      kaoshi_id: "", //考试时间id
    });
    // 身份证正则
    let validatePass = async (rule, value) => {
      const zz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!zz.test(value)) {
        return Promise.reject("身份证格式填写错误");
      } else {
        return Promise.resolve();
      }
    };
    const rules = {
      nickname: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      gender: [
        {
          required: true,
          message: "请选择性别",
          trigger: "change",
        },
      ],
      username: [
        {
          required: true,
          message: "请输入身份证号",
          trigger: "blur",
        },
        {
          validator: validatePass,
          trigger: "blur",
        },
      ],
      kaoshi_id: [
        {
          required: true,
          message: "请选择报考时间",
          trigger: "change",
        },
      ],
    };

    const type = ref(0);

    const onSubmit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          message.loading({
            content: "请稍后...",
            key: "msg",
          });
          const data = await getSearchZkz(formState);
          if (data.code == 1) {
            message.destroy();
            notification.success({
              message: data.data ? "准考证信息查询成功" : "暂未准考证信息",
              description: `您的准考证号为：${data.data.zkz_num}`,
            });
            if (data.data) {
              type.value = 1;
              getViewInfo(data.data.id);
            }
          } else {
            message.error(`${data.msg}`);
          }
          console.log("准考证查询接口---", data);
        })
        .catch((error) => {
          console.log("error---", error);
          notification.error({
            message: "暂未准考证信息",
            description: `请核对您的查询信息`,
          });
        });
    };

    const kaoshiList = ref([]);

    const getInfo = async () => {
      const kaoshi = await getKaoshi();
      kaoshi.data.forEach(
        (item) => (item.kaoshi_date = proxy.$getTime(item.kaoshi_date))
      );
      kaoshiList.value = kaoshi.data;
    };

    const printingInfo = ref("");

    const getViewInfo = async (id) => {
      const params = {
        user_id: formState.user_id,
        zkz_id: id,
      };
      const { data } = await getSearchView(params);
      printingInfo.value = imgUrl + data.url;
      console.log("查询详情信息---", data);
    };

    const Printing = () => {
      window.open(printingInfo.value, "_blank");
    };

    onMounted(() => {
      getInfo();
    });

    return {
      formRef,
      other: "",
      formState,
      rules,
      onSubmit,
      kaoshiList,
      type,
      printingInfo,
      Printing,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  //   max-width: 500px;
  margin-top: 40px;

  .ant-form-item {
    flex-direction: var(--bannerFlex);
    justify-content: center;
  }

  .myButton {
    width: 357px;
    height: 45px;
    background: #554de6;
    border-radius: 25px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 45px;
    margin: 100px auto 0;
  }

  .button {
    margin-top: 20px;
    width: 100%;
    height: 45px;
    background: #554de6;
    border-radius: 25px;
    font-size: var(--txtSize);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }

  .buttons {
    text-align: center;
    font-size: var(--txtSize);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #808080;
    cursor: pointer;
  }

  .fenge {
    width: 100%;
    border-top: 1px solid #e6e6e6;
    padding-top: 40px;
    margin-top: 100px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.37rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  /deep/ .ant-col {
    width: 300px;
  }
  /deep/ .ant-form-item-label {
    width: 140px;
    margin-right: 20px;
  }
}
/deep/ .ant-modal-confirm-btns {
  display: none;
}
</style>
